<template>
	<view class="uni_box home">
		<!-- <image class="bghome" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" /> -->
		<navbar title='订单详情'>
		</navbar>
		<view class="content">
			<view class="gzuo">
				<view class="gzleft">
					<image class="icon_sj" src="@/pages_client/static/img/icon_sj.png" />
					<text class="zname">{{info.work_status_text}}</text>
					<image class="icon_nexthui" src="@/pages_client/static/img/icon_nexthui.png" />
				</view>
				<view class="gzright">
					<text class="yigzuo" v-if="info.work_status==0&&info.start_cha">距离开工剩余时间</text>
					<text class="yigzuo" v-if="info.work_status==1&&info.work_cha">已工作</text>
					<!-- <text class="yigzuo" v-if="info.status==2">已开除</text>
					<text class="yigzuo" v-if="info.status==3">提前终止用工</text>
					<text class="yigzuo" v-if="info.status==4">待结算</text>
					<text class="yigzuo" v-if="info.status==5">已结算</text> -->
					<u-count-down v-if="info.work_status==0&&info.start_cha" :timestamp="info.start_cha" bg-color="transparent" separator-color="#EA5918" font-size="44" color="#EA5918" separator="zh"></u-count-down>
					<text class="gzuotxt" v-if="info.work_status==1&&info.work_cha_text">{{ info.work_cha_text }}</text>
					<text class="yigzuo" v-if="info.work_status>=3" style="margin-bottom: 0;font-size: 30rpx;color: #FF6B3E;">{{info.pay_order_id>0?'已结算':'待结算'}}</text>
					<!-- <u-count-down :autoplay="false" v-if="info.work_status==1&&info.work_cha!=0" :timestamp="info.work_cha" bg-color="transparent" separator-color="#EA5918" font-size="44" color="#EA5918" separator="zh"></u-count-down> -->
				</view>
			</view>
			<!-- 已完成结算样式 -->
			 <view class="jieview" v-if="info.work_status>=3&&payinfo.settlement==1">
				<view class="jieone">
					<text class="jianame">结算工时</text>
					<view class="jiaright">
						<text class="shi">{{payinfo.workhour}}小时</text>
						<text class="shimiao">计薪时间 {{payinfo.starttime+'-'+payinfo.endtime}}</text>
					</view>
				</view>
				<view class="jieone">
					<text class="jianame">收入</text>
					<view class="jiaright">
						<text class="shi yuan">{{payinfo.pay_money}}元</text>
						<text class="shimiao" v-if="payinfo.settlement==1">工时{{ payinfo.workhour }} X {{ payinfo.price }}元/时薪</text>
						<text class="shimiao" v-if="payinfo.settlement==2">{{ payinfo.pay_hour }}件  {{ payinfo.price}}元/件</text>
					</view>
				</view>
				<view class="yiwen">
					<image class="icon_ts" src="@/pages_client/static/bq/icon_ts.png" />
					<text class="yitxt">如有疑问，请与老板方当面确认(提前结束计算将会有偏差,具体以实际结算金额为准)</text>
				</view>
			 </view>
			 <view class="jieview" v-else-if="info.work_status==5&&payinfo.settlement==2">
				<view class="jieone">
					<text class="jianame">结算工件</text>
					<view class="jiaright">
						<text class="shi">{{payinfo.pay_hour}}件</text>
						<text class="shimiao">计薪时间 {{payinfo.starttime+'-'+payinfo.endtime}}</text>
					</view>
				</view>
				<view class="jieone">
					<text class="jianame">收入</text>
					<view class="jiaright">
						<text class="shi yuan">{{payinfo.pay_money}}元</text>
						<text class="shimiao" v-if="payinfo.settlement==2">{{ payinfo.pay_hour }}件  {{ payinfo.price}}元/件</text>
					</view>
				</view>
				<view class="yiwen">
					<image class="icon_ts" src="@/pages_client/static/bq/icon_ts.png" />
					<text class="yitxt">如有疑问，请与老板方当面确认(提前结束计算将会有偏差,具体以实际结算金额为准)</text>
				</view>
			 </view>
			 <view class="bqview" v-if="info.work_status>=5">
				<view class="phead">
					<text class="bqtit">您下次还愿意接他的活吗？</text>
					<text class="tipj" @click="getpjia">提交评分</text>
				</view>
				<view class="bqitems">
					<view class="items" @click="getpfen(1)">
						<image class="bqone" v-if="score==1" src="@/pages_client/static/bq/bqones.png" />
						<image class="bqone" v-else src="@/pages_client/static/bq/bqone.png" />
						<text>不满意</text>
					</view>
					<view class="items" @click="getpfen(2)">
						<image class="bqone" v-if="score==2" src="@/pages_client/static/bq/bqtwos.png" />
						<image class="bqone" v-else src="@/pages_client/static/bq/bqtwo.png" />
						<text>不想</text>
					</view>
					<view class="items" @click="getpfen(3)">
						<image class="bqone" v-if="score==3" src="@/pages_client/static/bq/bqthrees.png" />
						<image class="bqone" v-else src="@/pages_client/static/bq/bqthree.png" />
						<text>看情况</text>
					</view>
					<view class="items" @click="getpfen(4)">
						<image class="bqone" v-if="score==4" src="@/pages_client/static/bq/bqfours.png" />
						<image class="bqone" v-else src="@/pages_client/static/bq/bqfour.png" />
						<text>愿意</text>
					</view>
					<view class="items" @click="getpfen(5)">
						<image class="bqone" v-if="score==5" src="@/pages_client/static/bq/bqfives.png" />
						<image class="bqone" v-else src="@/pages_client/static/bq/bqfive.png" />
						<text>一定</text>
					</view>
				</view>
			 </view>
			 <!-- 已完成结算样式结束 -->
			<view class="ywxian" v-if="info.insuranceist!=''">
				<image class="img_bjbao" src="@/pages_client/static/img/img_bjbao.png" />
				<view class="baoview">
					<image class="icON_bz" src="@/pages_client/static/img/icON_bz.png" />
					<text class="jianame">用工意外保障已生效</text>
					<text class="jianame lv">24小时内有效</text>
					<text class="jianame lv ml">由众安保险承保</text>
					<image class="icon_lvnext" src="@/pages_client/static/img/icon_lvnext.png" />
				</view>
			</view>
			<view class="titwo">
				<text class="gname">{{info.title}}</text>
				<view class="renlist">
					<text class="rentit">任务日期</text>
					<text class="renval">{{info.startday +'-'+info.endday}}</text>
				</view>
				<view class="renlist">
					<text class="rentit">任务时间</text>
					<view class="rval">
						<text class="renval">{{info.time}}</text>
					</view>
					
				</view>
				<view class="renlist">
					<text class="rentit">工作地点</text>
					<text class="renval">{{info.address_text+info.address_name}}</text>
					<image class="icon_fz" src="@/pages_client/static/img/icon_fz.png" @click="copy(info.address_text+info.address_name)" />
					<image class="icon_fz" src="@/pages_client/static/img/icon_dh.png" @click="getdaohang" />
				</view>
				<view class="renlist">
					<text class="rentit">订单编号</text>
					<text class="renval">{{ info.order_sn }}</text>
					<image class="icon_fz" src="@/pages_client/static/img/icon_fz.png" @click="copy(info.order_sn)" />
				</view>
				<view class="renlist">
					<text class="rentit">计时工价</text>
					<text class="renval">{{ info.price_text }}</text>
				</view>
				<view class="renlist" v-if="info.minimum">
					<text class="rentit">保底工价</text>
					<text class="renval">{{ info.minimum }}元/时</text>
				</view>
				<view class="renlist">
					<text class="rentit">需要人数</text>
					<text class="renval "> {{info.people}}  人</text>
				</view>
				<view class="renlist">
					<text class="rentit">任务要求</text>
					<text class="renval ">{{info.describe}}</text>
				</view>
				<view class="wenxin" style="border-radius: 20rpx;margin-top: 20rpx;">
					<view class="wentit">温馨提示</view>
					<view class="tiwen">
						<text class="xy">点击查看<text class="xyhu" style="color: red;" @click.stop="navrouter('/pages/my/yhXieyi?key=lhygxy&id='+info.id)">《灵活用工协议》</text></text>
					</view>
				</view>
			</view>
			<view class="titwo">
				<text class="gname">工作信息</text>
				<view class="bm">
					<image class="img_tx" :src="ossThree(info.boss.avatar)" />
					<text class="xm">{{info.boss.nickname}}</text>
					<text class="xb">{{info.boss.gender}}</text>
				</view>
				
			</view>
			<view class="titwo" v-if="info.id_card == 1">
				<view class="shouitem">
					<view class="tiview">
						<text class="sname">上传专业技能照</text>
						<text class="tipj" @click="gettijiaojinneg">提交</text>
					</view>
					<view class="tuview">
						
						<view class="tuitem" @click="getyulan(ossThree(jiimage))" v-if="jiimage">
							<image class="tuimg" :src="ossThree(jiimage)" mode="" />
						</view>
						<view class="tuitem" @click="upload(2)">
							<image class="icon_zp" src="@/pages_client/static/img/icon_zp.png" mode="" />
							<text>上传技能照</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="titwo">
				<view class="anquan">
					<image class="icon_aq" src="@/pages_client/static/img/icon_aq.png" mode="" />
					<text class="gnamenew">安全信息</text>
					<text class="jubao ml">举报</text>
					<image class="icon_nexthui" src="@/pages_client/static/img/icon_nexthui.png" mode="" />
				</view>
				<text class="tishi">该信息由用户发布，如遇虚假招聘、诈骗、传销等违规行该信息由用户发布，如遇虚假招聘、诈骗、传销等违规行</text>
			</view>	 -->
		</view>
		<view class="newbot">
			<view class="botti">
				<image class="bg" src="@/pages_client/static/img/img_bjda.png" />
				<view class="tione">
					<view class="tihead" v-if="info.work_status=='0'">
						<text class="qname">请在<text class="qnum">{{info.starthour}}</text>前到达工作地点</text>
						<text class="wushuang">请勿爽约，否则会扣除信用分导致无法接单</text>
					</view>
					<view class="tibot">
						<view class="tiitem" v-if="info.work_status==0||info.work_status==1" @click="orderoperate(1)">
							<image class="giicon" src="@/pages_client/static/img/icon_gbicon.png" />
							<text>取消订单</text>
						</view>
						<view class="tiitem" v-if="info.work_status==5" @click="orderoperate(6)">
							<image class="giicon" src="@/pages_client/static/img/icon_tx.png" />
							<text>钱包提现</text>
						</view>
						<view class="tiitem" v-if="info.work_status==0||info.work_status==1" @click="orderoperate(2)">
							<image class="giicon" src="@/pages_client/static/img/daohang.png" />
							<text>地图导航</text>
						</view>
						<view class="tiitem" v-if="info.work_status==0||info.work_status==1||info.work_status==4||info.work_status==5||info.work_status==3||info.work_status==2" @click="orderoperate(3)">
							<image class="giicon" src="@/pages_client/static/img/lxlb.png" />
							<text>联系老板</text>
						</view>
						<view class="tiitem" v-if="info.work_status==1||info.work_status==4||info.work_status==5" @click="orderoperate(4)">
							<image class="giicon" src="@/pages_client/static/img/icon_fd.png" />
							<text>飞单举报</text>
						</view>
					</view>
				</view>
			</view>
			<view class="botview" v-if="info.work_status!=5">
				<view class="yuwen" @click="getyuwen">
					<text class="lname">遇到问题？</text>
				</view>

				<view class="lianxi" v-if="info.work_status==0" @click="getobtn('kaigong')">
					<text class="lname">开工</text>
				</view>
				<view class="lianxi" v-if="info.work_status==1" @click="getobtn('again')">
					<text class="lname">完工</text>
				</view>
				<view class="lianxi" v-if="info.work_status==4"  @click="getobtn('cui')">
					<text class="lname">催工资</text>
				</view>
				<view class="lianxi" v-if="info.work_status==3&&info.pay_order_id==0"  @click="getobtn('cui')">
					<text class="lname">催工资</text>
				</view>
				
			</view>
		</view>
		<CancelOrder :cancelpop="cancelpop" :popid="id" @closecancel=closecancel @temClick="temClick"></CancelOrder>
		<OrderPop :orderjiheshow="orderjiheshow" :kaiinfo="kaiinfo" :orderjihestatus="orderjihestatus"  :popid="id" :popitem="info" @closeorderjihe="closeorderjihe" @getorderjihestatus="getorderjihestatus" @getkaiwan="getkaiwan" @getwangong="getkaiwan"></OrderPop>
	</view>
</template>

<script>
import {
		baseUrl
	} from '@/utils/config.js'; 
import CancelOrder from '@/pages/tabbar/components/CancelOrder/CancelOrder'
import OrderPop from '@/pages/tabbar/components/OrderPop/OrderPop'
	export default {
		components: {
			CancelOrder,
			OrderPop
		},
		data() {
			return {
				swlist: [{
						image: '/static/banner.png',
					},
					{
						image: '/static/banner.png',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					}
				],
				tablist: [{
					name: '商品详情'
				}, {
					name: '视频'
				}, {
					name: '交易规则'
				}],
				current: 0,
				backgroundColor:'none',
				phoneshow:false,
				ordershow:false,
				timestamp:86400,
				id:'',
				info:{},
				popid:'',
				cancelpop:false,

				orderjiheshow:false,
				orderjihestatus:1,//1确认开工 2开工码 3实名打卡 4已开工
				kaiinfo:{},//开工码检测数据
				popitem:{},
				score:5,//默认5分
				jiimage:'',//技能照片
				head_portrait:'',
				payinfo:{}
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id
			}
			this.getDetail()
			// work_status 0待开工 1工作中 2已开除 3终止用工 4待结算 5已结算
			
		},
		onShow() {
		},
		methods: {
			async getDetail(){
				let res = await this.$u.api.getOrderInfo({
					id:this.id
				});
				this.info = res.info
				if(this.info.score){
					this.score = this.info.score
				}
				if(this.info.zy_image){
					this.jiimage = this.info.zy_image
				}
				if(this.info.work_status>=3){
					this.getcomdata()
				}
				
			},
			async getcomdata(){
				let res = await this.$u.api.getCompletedData({
					id:this.id
				});
				this.payinfo = res

			},
			change(index) {
				this.current = index;
			},
			confrimOrderSucess(){
				this.navrouter("/pages_client/twoPage/OrderSucess");
			},
			orderoperate(e){
				if(e == 4){
					//飞单
					this.navrouter("/pages_client/twoPage/FlyReport?id="+this.id);
				}else if(e == 1){
					//取消订单
					this.cancelpop = true
				}else if(e == 2){
					//导航
					this.getdaohang()
				}else if(e == 3){
					//联系老板
					let that = this
					uni.makePhoneCall({
						phoneNumber: that.info.boss.mobile, //仅为示例，并非真实的电话号码
						success: function() {
							console.log("拨打电话成功！")
							// 请求接口 报名成功
						},
						fail: function() {
							console.log("拨打电话失败！")
						}
					})
				}else if(e == 6){
					//跳转提现
					this.navrouter("/pages_client/twoPage/M-wallet");
				}
			},
			getgzi(){
				uni.requestSubscribeMessage({
					tmplIds: ['4I4CEYZ4i8_tTwn4ZM4POjLVfA2iSuyfTqNLTqAJIGA'], // 模板ID列表，从微信小程序管理后台获取
					success(res) {
						console.log(res)
					if (res['4I4CEYZ4i8_tTwn4ZM4POjLVfA2iSuyfTqNLTqAJIGA'] === 'accept') { // 判断用户是否同意订阅消息
						console.log('用户同意订阅消息');
					} else {
						console.log('用户拒绝订阅消息');
					}
					},
					fail(err) {
					console.error('订阅失败', err);
					}
				});
					
			},
			getyuwen(){
				this.navrouter("/pages_client/twoPage/Problem");
			},
			closecancel(){
				this.cancelpop = false
				this.des = '';
				this.popid = '';
			},
			temClick(){
				this.cancelpop = false
				this.des = '';
				this.popid = '';
				this.getClear()
			},
			getdaohang(){
				//导航
				let that = this
				uni.openLocation({
					latitude: Number(that.info.lat),
					longitude: Number(that.info.lng),
					name: that.info.address_name,
					address: that.info.address_text,
					scale: 18,
					success(res) {
						console.log('打开地图成功');
					},
					fail(err) {
						console.error('打开地图失败', err);
					}
				});
			},
			getobtn(e){
				let button_type = e;//cancel取消 again 完工
                if(button_type == 'again'){
					//完工
					this.getwangong()
				}else if(button_type == 'kaigong'||button_type=='开工'){
					//开工
					this.getkaigong()
				}else if(button_type == 'cui'){
					//催工资
					this.orderjihestatus = 6;//1确认开工 2开工码 3实名打卡 4已开工
					this.orderjiheshow = true
				}
			},
			async getwangong(){
				let res = await this.$u.api.checkWrok({
					id:this.id
				});
				if(res.is_facial == 1){
					//需要拍完工照片
					this.orderjihestatus = 5;//1确认开工 2开工码 3实名打卡 4已开工 5完工
					this.orderjiheshow = true 
				}else{
					//请求完工接口
					let resd = await this.$u.api.endWorkStatus({
						id:this.id
					});

					this.getDetail()
				}
			},
			async getkaigong(){
					//开工检测
				let res = await this.$u.api.checkWrok({
					id:this.id
				});
				this.kaiinfo = res
				if(res.start_code == 0 && res.is_facial==0){
					//直接开工 不需要判断
					this.orderjihestatus = 1;//1确认开工 2开工码 3实名打卡 4已开工
					this.orderjiheshow = true
					
				}else if(res.start_code == 1){
					//需要判断开工码
					this.orderjihestatus = 2;//1确认开工 2开工码 3实名打卡 4已开工
					this.orderjiheshow = true 
					
				}else if(res.is_facial == 1){
					//需要判断人脸打卡
					this.orderjihestatus = 3;//1确认开工 2开工码 3实名打卡 4已开工
					this.orderjiheshow = true
					
				}
			},
			async gettijiaojinneg(){
				//上传技能照
				if(!this.jiimage){
					this.$u.toast("请先上传技能照");
					return;
				}
				let res = await this.$u.api.addZyImage({
					id:this.id,
					image:this.jiimage
				});
				this.$u.toast("上传成功");
			},
			getkaiwan(){
				//开工完成
				this.closeorderjihe()
				this.getDetail()
			},
			getorderjihestatus(e){
				this.orderjihestatus = e
			},
			closeorderjihe(){
				this.orderjiheshow = false
			},
			async getpjia(){
				//添加评价
				
				let res = await this.$u.api.addEvaluate({
					id:this.id,
					type:2,//类型 1评价员工 2评价老板
					score:this.score
				});
				this.$u.toast("操作成功");
			},
			getpfen(e){
				this.score = e
			},
			upload(e) {
				// this.htype = e
				
				uni.chooseImage({
						count: 1,
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							this.head_portrait = tempFilePaths[0];
							// this.isClick = true;
							this.unloadtou()
							uni.showLoading({
								title: '正在上传',
								icon: 'none',//图标
								mask: true
							});
						}
				});
				
			},
			unloadtou() {
				// console.log(this.head_portrait)
				let that = this
				uni.uploadFile({
					url: baseUrl + '/api/common/upload', //仅为示例，非真实的接口地址
					filePath: this.head_portrait,
					name: 'file',
					header: {
						'token': uni.getStorageSync('token'),
					},
					formData: {
						'token': uni.getStorageSync('token'),
					},
					success: (uploadFileRes) => {
						// console.log(uploadFileRes)
						uni.hideLoading();
						console.log(JSON.parse(uploadFileRes.data).data.url);//url
						that.jiimage = (JSON.parse(uploadFileRes.data).data.url)
						console.log(that.jiimage)
						
					},fail: e => {
						uni.hideLoading();
					},
				});
			},
			getyulan(e){
                uni.previewImage({
                    current: e, // 当前显示图片的 http 链接
                    urls: [e] // 需要预览的图片 http 链接列表
                });
            },
		},
		onPageScroll(e) {
			// console.log('页面滚动距离:', e.scrollTop);
			// 在这里编写滚动相关的逻辑
			if(e.scrollTop>=100){
				this.backgroundColor = '#ffffff'
			}else{
				this.backgroundColor = 'none'
			}
			this.$forceUpdate()
		},
		
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.bghome{
		width: 100%;
		position: absolute;
		top: 0;
		height: 550rpx;
		
	}
	.content{
		// background-color: #fff;
		background-color: #F5F5F5;
		padding-bottom: 500rpx;
		position: relative;
		.gzuo{
			margin: 0 50rpx 50rpx;
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			padding-top: 50rpx;
			.gzleft{
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.icon_sj{
				width: 50rpx;
				height: 50rpx;
				margin-right: 8rpx;
			}
			.zname{
				font-weight: 500;
				font-size: 40rpx;
				color: #111111;
			}
			.icon_nexthui{
				width: 24rpx;
				height: 24rpx;
				margin-left: 10rpx;
			}
			.gzright{
				margin-left: auto;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				.yigzuo{
					font-weight: 500;
					font-size: 26rpx;
					color: #666666;
					display: block;
					margin-bottom: 10rpx;
				}
			}
		}
		.lc{
			margin: 20rpx 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.bq{
				width: 28rpx;
				height: 28rpx;
				background: linear-gradient(90deg, #FF8F39, #FF4D43);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 800;
				font-size: 22rpx;
				color: #FFEFE9;
				margin-right: 5rpx;
			}
			.bqname{
				font-weight: 500;
				font-size: 24rpx;
				color: #EA5918;
				display: inline-block;
				margin-right: 5rpx;
				white-space: nowrap;
			}
			.icon-xyb{
				width: 42rpx;
				height: 31rpx;
				margin-right: 9rpx;
			}
		}
		.tieone{
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			margin: 24rpx 30rpx 0;
			.tname{
				font-weight: 800;
				font-size: 40rpx;
				color: #111111;
			}
			.bqitem{
				margin: 20rpx 0;
			}
			.sc{
				display: flex;
				padding: 4rpx 20rpx;
				flex-direction: row;
				align-items: center;
				border-radius: 6rpx;
				font-weight: 500;
				font-size: 24rpx;
				margin-right: 15rpx;
				background-color: rgba(245, 245, 245, 1);
				color: #999999;
				.icon_bz{
					width: 24rpx;
					height: 24rpx;
					margin-right: 5rpx;
				}
			}
			.bqitem{
				display: flex;
				flex-direction: row;
			}
			.lv{
				background-color: rgba(233, 255, 235, 1);
				color: #16B925;
			}
			.chengse{
				background-color: rgba(255, 238, 231, 1);
				color: #F07F4C;
			}
			.bm{
				display: flex;
				flex-direction: row;
				margin-top: 10rpx;
				.bmleft{
					font-weight: 800;
					font-size: 44rpx;
					color: #EA5918;
				}
				.danwei{
					font-weight: bold;
					font-size: 24rpx;
					color: #EA5918;
				}
			}
			
		}
		
		.ywxian{
			display: flex;
			// padding: 6rpx 15rpx;
			// background: #E9FFEB;
			// border-radius: 6rpx;
			align-items: center;
			// margin-top: 20rpx;
			position: relative;
			height: 80rpx;
			// padding: 0 15rpx;
			margin: 0 30rpx 24rpx;
			.img_bjbao{
				position: absolute;
				width: 100%;
				height: 100%;
			}
			.baoview{
				position: relative;
				display: flex;
				align-items: center;
				padding: 0 15rpx;
				width: 100%;
			}
			.icON_bz{
				margin-right: 6rpx;
				width: 24rpx;
				height: 24rpx;
			}
			.jianame{
				font-weight: 500;
				font-size: 24rpx;
				color: rgba(17, 17, 17, 1);
			}
			.lv{
				color: rgba(22, 185, 37, 1);
			}
			.icon_lvnext{
				width: 20rpx;
				height: 20rpx;
			}
			
		}
		.dtwo{
			padding: 30rpx;
		}
		.dname{
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.dfen{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 20rpx 0 0;
			.dfenitem{
				padding: 8rpx 20rpx;
				background: #EEEEEE;
				border-radius: 4rpx;
				margin-right: 20rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #51565D;
			}
			.gone{
				height: 26rpx;
				margin-right: 20rpx;
				width: 108rpx;
			}
			.dmiao{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
		
		.dthree{
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			.sname{
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				display: block;
				margin-bottom: 30rpx;
			}
			
			
			.slist{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.sitem{
					width: 50%;
					margin-bottom: 20rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.ziname{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						min-width: 90rpx;
					}
					.zval{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						display: inline-block;
						margin-left: 8rpx;
					}
					.cha{
						font-weight: 500;
						color: #42ABDC;
					}
				}
			}
		}

		.dfour{
			padding: 20rpx 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.tou{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.dfnav{
				width: 60%;
				display: flex;
				flex-direction: column;
				.dfname{
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #111111;
				}
				.dfmiao{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
			.dfright{
				display: flex;
				margin-left: auto;
				flex-direction: row;
				align-items: center;
				text{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.icon_next{
					margin-left: 6rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		.dfive{
			padding: 20rpx;
			.dcont{
				padding: 20rpx 0;
				border-top: 1rpx solid #eee;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
		
	}
	.titwo{
		background: #FFFFFF;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		margin: 24rpx 30rpx 0;
		.anquan{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 30rpx;
			.icon_aq{
				margin-right: 8rpx;
				width: 30rpx;
				height: 30rpx;
			}
			.jubao{
				font-weight: bold;
				font-size: 24rpx;
				color: #999999;
			}
			.icon_nexthui{
				margin-left: 5rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}
		.gname{
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			display: block;
			margin-bottom: 30rpx;
		}
		.gnamenew{
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			display: block;
		}
		.tishi{
			font-weight: 400;
			font-size: 22rpx;
			color: #666666;
		}
		.renlist{
			display: flex;
			flex-direction: row;
			margin-bottom: 20rpx;
			.rentit{
				display: inline-block;
				width: 130rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
			.renval{
				font-weight: bold;
				font-size: 24rpx;
				color: #111111;
				max-width: 60%;
				white-space: normal;
			}
			.lv{
				font-weight: bold;
				font-size: 24rpx;
				color: #16B925;
			}
		}
		.icon_fz{
			width: 45rpx;
			height: 45rpx;
			margin-left: 20rpx;
		}
		.rval{
			display: flex;
			flex-direction: column;
			flex: 1;
			.sm{
				background: #FFEEE7;
				border-radius: 5rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 5rpx 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				margin-top: 9rpx;
			}
		}
		
		.renlist:last-child{
			margin-bottom: 0;
		}
		.flex-col{
			display: flex;
			flex-direction: column;
		}
		.ditishi{
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			display: block;
			text-align: center;
			margin-top: 20rpx;
		}
		.dizhi{
			position: relative;
			width: 100%;
			margin-top: 20rpx;
			height: 155rpx;
			.dizhiicon{
				position: absolute;
				width: 100%;
				height: 100%;
			}
			.diitem{
				position: relative;
				padding: 40rpx 30rpx 20rpx 40rpx;
				display: flex;
				flex-direction: row;
				.dileft{
					width: 80%;
					display: flex;
					flex-direction: column;

				}
				.diname{
					max-width: 100%;
					display: block;
					font-weight: bold;
					font-size: 30rpx;
					color: #111111;
				}
				.dimiao{
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					display: block;
					margin-top: 10rpx;
				}
				.chadi{
					margin-left: auto;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.icon_dw{
						width: 28rpx;
						height: 28rpx;
						margin-bottom: 10rpx;
					}
					text{
						font-weight: 500;
						font-size: 20rpx;
						color: #999999;
					}
				}
			}

		}
		.bm{
			display: flex;
			flex-direction: row;
			margin-top: 20rpx;
			align-items: center;
			.zfabu{
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				display: inline-block;
				margin-right: 20rpx;
			}
			.img_tx{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
			.xm{
				font-weight: bold;
				font-size: 30rpx;
				color: #111111;
			}
			.xb{
				width: 30rpx;
				height: 30rpx;
				background: #DFFAFF;
				border-radius: 6rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 20rpx;
				color: #3EABFF;
				margin-left: 10rpx;
			}

			.bmleft{
				font-weight: 800;
				font-size: 44rpx;
				color: #EA5918;
			}
			.danwei{
				font-weight: bold;
				font-size: 24rpx;
				color: #EA5918;
			}
		}
		.hpl{
			background: #F5F5F5;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			padding: 25rpx 0;
			margin: 20rpx 0;
			.plitem{
				flex: 1;
				display: flex;
				flex-direction: column;
				border-right: 1rpx solid rgba(204, 204, 204, 1);
				align-items: center;
				justify-content: center;
				.pnum{
					font-weight: bold;
					font-size: 32rpx;
					color: #111111;
				}
				.pname{
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
			}
			.plitem:last-child{
				border-right: none;
			}
		}
	}
	.newbot{
		display: flex;
		flex-direction: column;
		// height: 200rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	.wenxin{
		height: 80rpx;
		background: #FFEEE5;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 30rpx;
		.wentit{
			border-radius: 6rpx;
			background-color: rgba(238, 127, 88, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			width: 54rpx;
			height: 54rpx;
			font-weight: bold;
			font-size: 20rpx;
			color: #FF5142;
			text-align: center;
		}
		.tiwen{
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			text{
				font-weight: 500;
				font-size: 20rpx;
				color: #EA5918;
			}
		}
	}
	.yuedu{
		height: 80rpx;
		display: flex;
		padding: 0 30rpx;
		align-items: center;
		background-color: #fff;
		.icon_xz_n{
			width: 36rpx;
			height: 36rpx;
			margin-right: 8rpx;
		}
		.xy{
			font-weight: 500;
			font-size: 20rpx;
			color: #999999;
		}
		.xyhu{
			color: rgba(234, 89, 24, 1);
		}
	}
	.botview{
			height: 120rpx;
			background: #FFFFFF;
			width: 100%;
			
			display: flex;
			flex-direction: row;
			align-items: center;
			z-index: 10;
			// border-top: 1rpx solid #eee;
			padding: 0 30rpx 20rpx 30rpx;
			
			.botleft{
				width: 20%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.icon_fenxiang{
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 5rpx;
				}
				text{
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666;
				}
			}
			.lianxi{
				margin-left: 30rpx;
				width: 60%;
				height: 90rpx;
				background: linear-gradient(90deg, #FF8F39, #FF4D43);
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				.lname{
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				.lmiao{
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
				}
			}
			.yuwen{
				flex: 1;
				// margin-right: 30rpx;
				height: 90rpx;
				background: #F5F5F5;
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
			}
			.liantwo{
				display: flex;
				flex-direction: row;
				flex: 1;
				.qubtn{
					height: 90rpx;
					width: 200rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #F5F5F5;
					border-radius: 45rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
				.queren{
					background: linear-gradient(90deg, #FF8F39, #FF4D43);
					color: #fff;
					margin-left: auto;
				}
			}
		}
	.zhanwei{
		height: 20rpx;
		width: 100%;
		background-color: #f6f6f6;
	}
	.botti{
		position: relative;
		// height: 387rpx;
		width: 100%;
		.bg{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.tione{
			position: relative;
			width: 100%;
			height: 100%;
			.tihead{
				display: flex;
				flex-direction: column;
				margin: 60rpx 40rpx;
				.qname{
					font-weight: bold;
					font-size: 36rpx;
					color: #000000;
				}
				.qnum{
					font-weight: 800;
					font-size: 36rpx;
					color: #EA5918;
					display: inline-block;
					margin: 0 8rpx;
				}
				.wushuang{
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
					display: block;
					margin-top: 8rpx;
				}
			}
			.tibot{
				height: 50%;
				width: 100%;
				position: relative;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				margin-top: auto;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 30rpx;
				// justify-content: center;
				.tiitem{
					// width: 120rpx;
					height: 120rpx;
					flex: 1;
					background: #FFFFFF;
					border-radius: 20rpx;
					border: 1px solid #CCCCCC;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					// margin-right: 50rpx;
					margin: 0 25rpx;
					max-width: 120rpx;
					.giicon{
						width: 56rpx;
						height: 56rpx;
						margin-bottom: 10rpx;
					}
					text{
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
					}
				}
				.tiitem:last-child{
					margin-right: 0;
				}
			}
		}
	}
	.jieview{
		background: #FFFFFF;
		border-radius: 30rpx;
		margin: 30rpx;
		padding: 30rpx;
		.jieone{
			display: flex;
			flex-direction: row;
			margin-bottom: 30rpx;
			.jianame{
				font-weight: bold;
				font-size: 28rpx;
				color: #111111;
			}
			.jiaright{
				margin-left: auto;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				.shi{
					font-weight: bold;
					font-size: 28rpx;
					color: #111111;
				}
				.shimiao{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					display: block;
					margin-top: 8rpx;
				}
				.yuan{
					font-weight: bold;
					font-size: 32rpx;
					color: #FF6B3E;
				}
			}
		}
		.yiwen{
			display: flex;
			flex-direction: row;
			align-items: center;
			background: #FFF8F5;
			border-radius: 10rpx;
			padding: 14rpx 20rpx;
			.icon_ts{
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
			text{
				font-weight: 500;
				font-size: 24rpx;
				color: #FF6B3E;
			}
		}
	}
	.bqview{
		background: #FFFFFF;
		border-radius: 30rpx;
		margin: 0 30rpx 30rpx;
		padding: 30rpx;
		.bqtit{
			font-weight: bold;
			font-size: 28rpx;
			color: #111111;
			display: block;
			
		}
		.phead{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 50rpx;
		}
		.tipj{
			margin-left: auto;
			font-weight: 500;
			font-size: 28rpx;
			color: #FF6B3E;
		}
		.bqitems{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.bqone{
				width: 68rpx;
				height: 68rpx;
			}
			.items{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text{
					font-weight: 500;
					font-size: 24rpx;
					color: #111111;
					display: block;
					margin-top: 10rpx;
				}
			}
		}
	}
	.tiview{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.shouitem{
			display: flex;
			flex-direction: column;
			margin-bottom: 30rpx;
			.sname{
				font-weight: bold;
				font-size: 32rpx;
				color: #111111;
				display: block;
				// margin-bottom: 30rpx;
			}
			.tipj{
				margin-left: auto;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF6B3E;
			}
			
			.sinput{
				background: #F5F5F5;
				border-radius: 50rpx;
				padding: 5rpx 30rpx;
			}
		}
		.shouitem:last-child{
			margin-bottom: 0;
		}
		.tuview{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.tuitem{
				margin: 0 30rpx 0 0;
				width: 160rpx;
				height: 160rpx;
				background: #F8F8F8;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				position: relative;
				.icon_zp{
					width: 56rpx;
					height: 56rpx;
					margin-bottom: 20rpx;
				}
				text{
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
				}
				.tuimg{
					position: absolute;
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}
			.tuchuan{
				.icon_zp{
					position: absolute;
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
					margin-bottom: 0;
				}
			}
		}
		.gzuotxt{
				font-weight: 500;
				font-size: 30rpx;
				color: #EA5918;
				display: block;
			}
			.yitxt{
				display: inline-block;
				max-width: 94%;
			}
</style>
